<template>
  <div class="category-cloud bg-white rounded-2xl shadow p-6">
    <div class="flex items-center gap-2 mb-4">
      <span class="text-lg font-bold">问题分类</span>
      <span class="text-xs text-blue-400 bg-blue-50 rounded px-2 py-0.5 ml-2">热门</span>
    </div>
    <div class="flex flex-wrap gap-2 mb-4">
      <el-tag
        v-for="(cat, index) in categories"
        :key="cat.id"
        :class="[
          'category-tag',
          `tag-color-${index % 8}`,
          active === cat.id ? 'active-tag' : '',
          'border font-medium cursor-pointer transition-all duration-200 flex items-center'
        ]"
        size="small"
        @click="handleTagClick(cat)"
      >
        <!-- <span v-if="cat.hot" class="mr-1">🔥</span> -->
        <img  v-if="cat.hot" :src="hot" alt="hot" class="w-4 h-4 inline-block"> 
        {{ cat.name }}
        <span class="ml-1 text-xs opacity-60">({{ cat.count }})</span>
      </el-tag>
    </div>
    <el-button 
      v-if="active" 
      size="small" 
      class="reset-btn mt-2 w-full"
      @click="handleReset"
    >
      重置筛选
    </el-button>
  </div>
</template>

<script setup>
import hot from '@/assets/hot.png'

const props = defineProps({
  categories: {
    type: Array,
    default: () => []
  },
  active: {
    type: [String, Number],
    default: ''
  }
})

const emit = defineEmits(['update:active'])

const handleTagClick = (cat) => {
  emit('update:active', props.active === cat.id ? '' : cat.id)
}

const handleReset = () => {
  emit('update:active', '')
}
</script>

<style scoped>
.category-cloud {
  width: 250px;
  min-width: 200px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  padding: 18px 20px 24px 20px;
  height: fit-content;
  margin-top: 0;
}

.category-tag {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.category-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 标签基础颜色 */
.tag-color-0 {
  background-color: #e6f4ff !important;
  color: #1677ff !important;
  border-color: #91caff !important;
}

.tag-color-1 {
  background-color: #f6ffed !important;
  color: #52c41a !important;
  border-color: #b7eb8f !important;
}

.tag-color-2 {
  background-color: #fff7e6 !important;
  color: #fa8c16 !important;
  border-color: #ffd591 !important;
}

.tag-color-3 {
  background-color: #fff1f0 !important;
  color: #f5222d !important;
  border-color: #ffa39e !important;
}

.tag-color-4 {
  background-color: #f9f0ff !important;
  color: #722ed1 !important;
  border-color: #d3adf7 !important;
}

.tag-color-5 {
  background-color: #e6fffb !important;
  color: #13c2c2 !important;
  border-color: #87e8de !important;
}

.tag-color-6 {
  background-color: #fcffe6 !important;
  color: #a0d911 !important;
  border-color: #eaff8f !important;
}

.tag-color-7 {
  background-color: #fff0f6 !important;
  color: #eb2f96 !important;
  border-color: #ffadd2 !important;
}

/* 选中状态样式 */
.active-tag {
  transform: translateY(-2px) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.tag-color-0.active-tag {
  background-color: #1677ff !important;
  color: white !important;
  border-color: #1677ff !important;
}

.tag-color-1.active-tag {
  background-color: #52c41a !important;
  color: white !important;
  border-color: #52c41a !important;
}

.tag-color-2.active-tag {
  background-color: #fa8c16 !important;
  color: white !important;
  border-color: #fa8c16 !important;
}

.tag-color-3.active-tag {
  background-color: #f5222d !important;
  color: white !important;
  border-color: #f5222d !important;
}

.tag-color-4.active-tag {
  background-color: #722ed1 !important;
  color: white !important;
  border-color: #722ed1 !important;
}

.tag-color-5.active-tag {
  background-color: #13c2c2 !important;
  color: white !important;
  border-color: #13c2c2 !important;
}

.tag-color-6.active-tag {
  background-color: #a0d911 !important;
  color: white !important;
  border-color: #a0d911 !important;
}

.tag-color-7.active-tag {
  background-color: #eb2f96 !important;
  color: white !important;
  border-color: #eb2f96 !important;
}

/* 重置按钮样式 */
.reset-btn {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  border: none;
  color: #64748b;
  font-weight: 500;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background: linear-gradient(135deg, #e4e7eb 0%, #cbd2d9 100%);
  color: #475569;
  transform: translateY(-1px);
}

.reset-btn:active {
  transform: translateY(0px);
}

/* 选中标签内的计数样式 */
.active-tag .opacity-60 {
  opacity: 0.9 !important;
  color: white !important;
}
</style> 

